<template>
  <div id="app">
    <!-- 应用根组件 -->
  </div>
</template>

<script>
// 导入微信错误处理器
import wechatErrorHandler from '@/utils/wechatErrorHandler.js'

export default {
  name: 'App',
  onLaunch: function() {
    console.log('App Launch')
    
    // 初始化微信错误处理器
    try {
      console.log('初始化微信错误处理器')
      // 错误处理器会自动初始化
    } catch (error) {
      console.error('初始化错误处理器失败:', error)
    }
    
    // 初始化应用
    this.initApp()
  },
  onShow: function() {
    console.log('App Show')
    
    // 检查网络状态
    this.checkNetworkStatus()
    
    // 检查认证状态
    this.checkAuthStatus()
  },
  onHide: function() {
    console.log('App Hide')
  },
  
  methods: {
    // 初始化应用
    async initApp() {
      try {
        // 获取系统信息
        await this.$store.dispatch('getSystemInfo')
        
        // 初始化认证状态
        this.$store.dispatch('auth/initAuth')
        
        // 检查网络状态
        this.checkNetworkStatus()
        
        console.log('应用初始化完成')
      } catch (error) {
        console.error('应用初始化失败:', error)
      }
    },
    
    // 检查网络状态
    checkNetworkStatus() {
      uni.getNetworkType({
        success: (res) => {
          const isConnected = res.networkType !== 'none'
          this.$store.commit('SET_NETWORK_STATUS', isConnected)
          
          if (!isConnected) {
            uni.showToast({
              title: '网络连接异常',
              icon: 'none',
              duration: 2000
            })
          }
        },
        fail: (error) => {
          console.error('获取网络状态失败:', error)
          this.$store.commit('SET_NETWORK_STATUS', false)
        }
      })
    },
    
    // 检查认证状态
    checkAuthStatus() {
      // 如果用户已登录，验证token有效性
      if (this.$store.getters['auth/isLoggedIn']) {
        this.$store.dispatch('auth/verifyToken').catch(error => {
          console.warn('Token验证失败:', error)
          // Token无效时会在auth模块中自动清除认证信息
        })
      }
    }
  }
}
</script>

<style lang="scss">
/* 全局样式 */

/* 全局样式 */
page {
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* 通用样式类 */
.container {
  padding: 20rpx;
}

.text-center {
  text-align: center;
}

.text-primary {
  color: #007aff;
}

.text-success {
  color: #4cd964;
}

.text-warning {
  color: #f0ad4e;
}

.text-danger {
  color: #dd524d;
}

.bg-white {
  background-color: #ffffff;
}

.border-radius {
  border-radius: 10rpx;
}

.shadow {
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 布局样式 */
.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.flex-between {
  justify-content: space-between;
}

.flex-around {
  justify-content: space-around;
}

.flex-1 {
  flex: 1;
}

/* 间距样式 */
.m-10 { margin: 10rpx; }
.m-20 { margin: 20rpx; }
.mt-10 { margin-top: 10rpx; }
.mt-20 { margin-top: 20rpx; }
.mb-10 { margin-bottom: 10rpx; }
.mb-20 { margin-bottom: 20rpx; }
.ml-10 { margin-left: 10rpx; }
.ml-20 { margin-left: 20rpx; }
.mr-10 { margin-right: 10rpx; }
.mr-20 { margin-right: 20rpx; }

.p-10 { padding: 10rpx; }
.p-20 { padding: 20rpx; }
.pt-10 { padding-top: 10rpx; }
.pt-20 { padding-top: 20rpx; }
.pb-10 { padding-bottom: 10rpx; }
.pb-20 { padding-bottom: 20rpx; }
.pl-10 { padding-left: 10rpx; }
.pl-20 { padding-left: 20rpx; }
.pr-10 { padding-right: 10rpx; }
.pr-20 { padding-right: 20rpx; }

/* 按钮样式 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16rpx 32rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.95);
  }
  
  &.btn-primary {
    background-color: #007aff;
    color: #fff;
    
    &:disabled {
      background-color: #ccc;
      color: #999;
    }
  }
  
  &.btn-secondary {
    background-color: #f0f0f0;
    color: #333;
    
    &:disabled {
      background-color: #f5f5f5;
      color: #ccc;
    }
  }
  
  &.btn-success {
    background-color: #4cd964;
    color: #fff;
  }
  
  &.btn-warning {
    background-color: #f0ad4e;
    color: #fff;
  }
  
  &.btn-danger {
    background-color: #dd524d;
    color: #fff;
  }
}

/* 卡片样式 */
.card {
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  
  .card-header {
    padding: 24rpx;
    border-bottom: 1rpx solid #f0f0f0;
    font-weight: 600;
  }
  
  .card-body {
    padding: 24rpx;
  }
  
  .card-footer {
    padding: 24rpx;
    border-top: 1rpx solid #f0f0f0;
    background-color: #fafafa;
  }
}

/* 列表样式 */
.list {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  
  .list-item {
    padding: 24rpx;
    border-bottom: 1rpx solid #f0f0f0;
    display: flex;
    align-items: center;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:active {
      background-color: #f8f9fa;
    }
    
    .list-item-content {
      flex: 1;
    }
    
    .list-item-arrow {
      color: #ccc;
      font-size: 24rpx;
    }
  }
}

/* 表单样式 */
.form-item {
  margin-bottom: 32rpx;
  
  .form-label {
    display: block;
    margin-bottom: 12rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }
  
  .form-input {
    width: 100%;
    padding: 20rpx;
    border: 1rpx solid #e0e0e0;
    border-radius: 8rpx;
    font-size: 28rpx;
    background-color: #fff;
    box-sizing: border-box;
    
    &:focus {
      border-color: #007aff;
      outline: none;
    }
    
    &:disabled {
      background-color: #f5f5f5;
      color: #999;
    }
  }
  
  .form-error {
    margin-top: 8rpx;
    font-size: 24rpx;
    color: #dd524d;
  }
}

/* 加载状态 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  
  .loading-content {
    background-color: #fff;
    padding: 40rpx;
    border-radius: 12rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .loading-text {
      margin-top: 20rpx;
      font-size: 28rpx;
      color: #666;
    }
  }
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 100rpx 40rpx;
  
  .empty-icon {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 20rpx;
    opacity: 0.5;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 20rpx;
  }
  
  .empty-action {
    margin-top: 20rpx;
  }
}

/* 错误状态 */
.error-state {
  text-align: center;
  padding: 100rpx 40rpx;
  
  .error-icon {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 20rpx;
  }
  
  .error-text {
    font-size: 28rpx;
    color: #dd524d;
    margin-bottom: 20rpx;
  }
  
  .error-action {
    margin-top: 20rpx;
  }
}
</style>